<template>
    <div style="background-color: #dee8f3;">
      <el-carousel :interval="3000" arrow="never" class="carouselBlock" indicator-position="none">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item.url" class="carouselImg"/>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
    export default {
        name: 'carousel',
      data () {
          return {
            imgs: [{
              url: require('../../../assets/header/lunbo1.png')
            }, {
              url: require('../../../assets/header/lunbo2.png')
            }, {
              url: require('../../../assets/header/lunbo3.png')
            }, {
              url: require('../../../assets/header/lunbo4.png')
            }]
          }
      }
    }
</script>

<style lang="scss">
  .carouselBlock{
    width: 1004px;
    margin: 0 auto;
    position:relative;
    .carouselImg{
      width:100%;
    }
  }
  .el-carousel__container{
    width: 100%;
    height: 262px;
  }
</style>
